<template>

  <div>
    <Layout>
      <Content class="layout-content">

        <Row>
          <Col span="12">
            <div ref="groovyEditor" style="width:100%;height: 800px;text-align:left;"></div>
          </Col>
          <Col span="0.5">
            &nbsp;&nbsp;
          </Col>
          <Col span="11">
            <Row>
              <Col span="24">
                <Tag>出参</Tag>
              </Col>

              <Col span="24">
                <ParamDefine :params="params.output"
                             :isViewBasicFieldFlag="true"
                             :isViewArrayFlag="true"
                             :isAddColumnFlag="true"
                             :jsonEditorFlag="true"
                             :isUpdateColumnFlag="true"
                             :isActionColumnFlag="true"
                             :isRemoveColumnFlag="true"
                             :isAddChildrenColumnFlag="true"
                             :isMappingColumnFlag="false" ref="left"></ParamDefine>
              </Col>
            </Row>
          </Col>
        </Row>
      </Content>
    </Layout>

  </div>


</template>
<script setup>
import {onMounted, ref, toRaw, inject, getCurrentInstance} from "vue";
import api from '../request/apis'
import moment from "moment";
import {Button, Message, Radio, Row, Switch, Tag} from 'view-ui-plus'
import {nextTick, debounce, getValue, setValue} from '../utils'
import _ from "lodash";
import * as monaco from "monaco-editor";
import ParamDefine from "./ParamDefine.vue";


const monacoEditor = ref();
const groovyEditor = ref();

const params = ref({
  output: {
    params: [],
    basicTypeFlag: false,
    isArrayFlag: false,
    jsonEditorFlag: true
  }
})
const left = ref();
const initGroovy = () => {
  if (!monacoEditor.value) {
    monacoEditor.value = monaco.editor.create(groovyEditor.value, {
          value: `def main(args){


}`,
          language: "java",
          theme: "vs-dark", // 主题
          folding: true, // 是否折叠
          foldingHighlight: true, // 折叠等高线
          foldingStrategy: "indentation", // 折叠方式  auto | indentation
          showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
          disableLayerHinting: true, // 等宽优化
          emptySelectionClipboard: false, // 空选择剪切板
          selectionClipboard: false, // 选择剪切板
          automaticLayout: true, // 自动布局
          codeLens: false, // 代码镜头
          scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
          colorDecorators: true, // 颜色装饰器
          accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
          lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
          lineNumbersMinChars: 5, // 行号最小字符   number
          enableSplitViewResizing: false,
          readOnly: false, //是否只读  取值 true | false
        }
    );
    // 编辑监听
    toRaw(monacoEditor.value).onDidChangeModelContent(() => {

    });
  } else {
    toRaw(monacoEditor.value).setValue(`def main(args){


}`);
  }
}

onMounted(() => {
  initGroovy();


  setValue(function () {
    return {
      scripts: toRaw(monacoEditor.value).getValue(),
      ...params.value
    };
  });

  getValue(function (d) {
    if (!d) {
      return
    }
    if (d.output) {
      const dbc = left.value.repairJson(d.output);
      params.value.output.params = dbc.params;
      params.value.output.isArrayFlag = dbc.isArrayFlag;
      params.value.output.basicTypeFlag = dbc.basicTypeFlag;
      params.value.output.basicFieldType = dbc.basicFieldType;
    }
    if (d.scripts) {
      toRaw(monacoEditor.value).setValue(d.scripts);
    }
  });

})
</script>
<style scoped>
</style>